<template>
	<view class="content">
		 <mine-head title="关于无忧"></mine-head>
		 <view class="pic-box">
		 	<image src="@/static/img/mine/logo.png" mode=""></image>
			<view class="name">
				{{data.name}}
			</view>
			<view class="info">
				<!-- {{data.versions}} -->
			</view>
		 </view>
		 <view class="list">
		 	<view class="item">
		 		<view class="title">
		 			当前版本
		 		</view>
				<view class="info">
					<!-- {{data.versions}} -->
					v1.0.0
				</view>
				
		 	</view>
			<!-- <view class="item">
				<view class="title">
					官方Q群
				</view>
				<view class="info">
					{{data.bluetooth}}
				</view>
			</view> -->
			<view class="item">
				<view class="title">
					服务热线
				</view>
				<view class="info" @click="callFn">
					{{data.phone}}
				</view>
			</view>
			
		 </view>
		 <view class="bottom">
		 	<view class="yinsi">
		 		<span class="mr20" @click="showPop(1)">
		 			隐私政策
		 		</span>  |  
				<span class="ml20" @click="showPop(2)">
					用户协议
				</span>
		 	</view>
			<!-- ICP备案号：滇ICP备2023012345号-2A -->
		 </view>
		 <u-popup v-model="show" mode="bottom" @close="closePop"  height="80%" :closeable="true">
			<view class="popCon">
				<view class="title">
					{{popTitle}}
				</view>
				<view class="text" v-html="serviceTerms">
					
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	export default {
		data() {
			return {
				data:{
					
				},
				show:false,
				popTitle:'隐私政策',
				serviceTerms:'',
				popType:0
			};
		},
		onLoad() {
			this.data.versions = config.version
		},
		onShow() {
			this.getData()
		},
		methods:{
			callFn(){
				if(this.data.phone ){
					uni.makePhoneCall({
						phoneNumber: this.data.phone 
					});
				}
				
			
			},
			showPop(e){
				this.show = true
				this.popTitle = e==1?'隐私政策':'用户协议'
				this.popType = e==1?3701:3702
				this.getPopData()
			},
			getPopData(){
				let that = this
				let p = {
					data:this.popType,
				}
				uni.$_post({
					url: "get-health-view",
					that: that,
					params: p,
					success(res) {
						if(res.code == 0){
							let data = res.data;	
							that.serviceTerms = res.data.content
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			getData(){
				let that = this
				let p = {
					data:1,
				}
				uni.$_post({
					url: "wuyou-about",
					that: that,
					params: p,
					success(res) {
						if(res.code == 0){
							that.data = res.data
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			closePop(){
				this.isShowPop = false
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		height: 100vh;
		position: relative;
		.bottom{
			position: absolute;
			bottom: 80rpx;
			left: 0;
			line-height: 48rpx;
			font-size: 24rpx;
			color: #BBBBBB;
			text-align: center;
			width: 100%;
			span:hover{
				color: #6387FF;
			}
		}
	}
	.popCon{
		padding: 20rpx 30rpx;
		.title{
			font-size: 36rpx;
			font-weight: bold;
			color: #000;
			margin: 0 0 20rpx 0;
			padding: 30rpx 0;
			text-align: center;
			background-color: #fff;
			position: sticky;
			top: 0;
			border-bottom: 1rpx solid #eee;
		}
	}
.pic-box{
	padding: 100rpx 30rpx 80rpx;
	margin-bottom: 30rpx;
	border-bottom: 1rpx solid #eee;
	image{
		width: 158rpx;
		height: 150rpx;
		margin: 0 auto 30rpx;
		display: block;
	}
	.name{
		text-align: center;
		font-size: 36rpx;
		color: #000;
		font-family: $uni-font-family-Heavy;
		margin-bottom: 10rpx;
	}
	.info{
		text-align: center;
		font-size: 26rpx;
		color: #666;
	}
}
.list{
	padding: 0 50rpx;
	.item{
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
		.title{
			font-size: 32rpx;
			color: #000;
		}
		.info{
			font-size: 24rpx;
			color: #aaa;
		}
	}
}
.btn{
	padding: 30rpx 50rpx;
	/deep/.u-btn--primary{
		background-color: #6387FF;
		border-color: #6387FF;
	}
}
</style>
